<template>
  <div class="page-order-detail">
    <base-info class="base-info" categoryTitle="" :params="params" :data="data">

    </base-info>
    <div v-if="showGoodsTable" class="goods-title">货物信息</div>
    <egrid v-if="showGoodsTable" class="egrid-class" border
           :header-cell-style="getHeaderCellClass"
           :data="data.goodsDetails"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps">
    </egrid>
    <div v-if="showStorageTable" class="goods-title">入库仓库</div>
    <egrid v-if="showStorageTable" border
           :header-cell-style="getHeaderCellClass"
           :data="storageList"
           :columns="storeageCols"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps">
    </egrid>
    <div v-if="data.remark || data.cancelReason" class="text-div">
      <div v-if="data.remark" class="text-class">备注：<span>{{data.remark}}</span></div>
      <div v-if="data.cancelReason" class="text-class">取消理由：<span>{{data.cancelReason}}</span></div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import BaseInfo from 'components/wms/comm/BaseInfo';
  import mValidate from 'utils/common-method/validate/index';
  export default{
    props: {
      id: [String, Number]
    },
    components: {BaseInfo},
    data() {
      return {
        params: [
          {
            label: '货主企业',
            labelIcon: ['icon maliiconfont maliicon-storehouse'],
            delimiter: ' ',
            key: 'ownerName'
          },
          {
            label: '联系人姓名',
            labelIcon: ['icon maliiconfont maliicon-img_details_figure'],
            delimiter: ' ',
            key: 'contactName'
          },
          {
            label: '联系人电话',
            labelIcon: ['icon maliiconfont maliicon-img_details_relation'],
            key: 'contactPhone',
            delimiter: ' '
          },
          {
            label: '预计入库时间',
            labelIcon: ['icon maliiconfont maliicon-img_details_calendar'],
            delimiter: ' ',
            key: 'instoreTime'
          },
          {
            label: '期望存储天数',
            labelIcon: ['icon maliiconfont maliicon-img_details_type'],
            delimiter: ' ',
            key: 'instoreDays'
          },
          {
            label: '期望存储地区',
            labelIcon: ['icon maliiconfont maliicon-img_detailse_source'],
            delimiter: ' ',
            key: 'city'
          }
        ],
        data: {
          ownerName: '永百川货运',
          contactName: '王大贵',
          contactPhone: '18318318318',
          instoreTime: '2018-9-27',
          instoreDays: 60,
          city: '广州、深圳',
          remark: '这是个备注',
          cancelReason: '找不到合适的库',
          goodsDetails: [
            {
              goodsName: '冻牛肩胛骨',
              planCount: 234,
              planWeight: 2355
            },
            {
              goodsName: '冻大羊六分体',
              planCount: '324',
              planWeight: 1534
            }
          ]
        },
        columnsSchema: {
//          '订单号' : { minWidth: 100},
//          '操作': { fixed: 'right' }
        },
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          align: 'center',
          showOverflowTooltip: true
        },
        columns: [
          {
            label: '货物名称',
            prop: 'goodsName'
          },
          {
            label: '计划入库数量',
            prop: 'planCount'
          },
          {
            label: '计划入库重量（kg）',
            prop: 'planWeight'
          }
        ],
        storeageCols: [
          {
            label: '冷库名称',
            prop: 'storageName'
          },
          {
            label: '仓库地址',
            prop: 'storageAddress'
          },
          {
            label: '联系人姓名',
            prop: 'storageContact'
          },
          {
            label: '联系人电话',
            prop: 'storageContactPhone'
          }
        ],
        storageList: [{
          storageName: '',
          storageAddress: '',
          storageContact: '',
          storageContactPhone: ''
        }],
        orderId: this.id,
        showGoodsTable: false, // 是否显示货物的表格数据
        showStorageTable: false // 是否显示仓库的表格数据
      };
    },
    created() {
      this.initData();
    },
    methods: {
      // 根据找库订单ID获取找库订单的详细数据
      initData() {
        this.ajax({
          type: 'GET',
          url: '/maliwms/instoreOrder/getOrder/' + this.orderId,
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.data = res.result;
            let cities = res.result.city ? res.result.city : [];
            this.data.city = '';
            let len = cities.length;
            for (let i = 0; i < len; i++) {
              this.data.city += cities[i];
              if (i < (len - 1)) {
                this.data.city += '、';
              }
            }
            // 判断是否有货物的数据
            this.showGoodsTable = res.result.goodsDetails && res.result.goodsDetails.length > 0;
            // 判断是否有仓库的数据
            if (mValidate.stringIsNullOrEmpty(res.result.storageName)) {
              this.showStorageTable = false;
            } else {
              this.showStorageTable = true;
              this.storageList[0].storageContact = res.result.storageContact;
              this.storageList[0].storageContactPhone = res.result.storageContactPhone;
              this.storageList[0].storageId = res.result.storageId;
              this.storageList[0].storageName = res.result.storageName;
              this.storageList[0].storageAddress = res.result.storageAddress;
            }
          }
        });
      },
      // 定义表头的样式
      getHeaderCellClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background: #ffffff; height: 50px';
        } else {
          return '';
        }
      }
    }
  };
</script>
<style>
  .page-order-detail {
    width: 958px;
  }
  .page-order-detail .base-info {
    height: auto;
    border-top: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    background-color: #f5f6f7
  }
  .page-order-detail .egrid-class {
    margin-bottom: 20px;
  }

  .page-order-detail .text-div {
    width: 958px;
    height: auto;
    margin-top: 20px;
    padding-bottom: 24px;
    border: 1px solid #e5e5e5;
    background-color: white;
  }

  .page-order-detail .text-div .text-class {
    margin-top: 20px;
    margin-left: 20px;
    color: #333333;
  }

  .page-order-detail .maliiconfont {
    color: #ff6c2b;
  }
  .page-order-detail .goods-title {
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    width: 100%;
    margin-top: 20px;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    background: white
  }
</style>
